<template>
  <div class="myInfo">
    <hmNavBar title="我的资料" path="/home/my"> </hmNavBar>
    <div class="content">
      <mycell
        title="头像"
        :value="userInfo.avatar"
        type="img"
        class="round"
        @click.native="$router.push('/home/editInfo?type=avatar')"
      >
      </mycell>
    </div>
    <div class="other-info">
      <!--使用路由传参告诉编辑组件需要编辑哪个字段 -->
      <mycell
        title="昵称"
        :value="userInfo.nickname"
        @click.native="$router.push('/home/editInfo?type=nickname')"
      ></mycell>
      <!-- 点击显示性别 修改弹窗 -->
      <mycell
        title="姓别"
        :value="genderObj[userInfo.gender]"
        @click.native="isShowGender = true"
      ></mycell>
      <!-- 点击地区显示弹窗 -->
      <mycell
        title="地区"
        :value="area.city_list[userInfo.area]"
        @click.native="isShowCity = true"
      ></mycell>
      <!-- 个人简介跳转处理 -->
      <mycell
        title="个人简介"
        :value="userInfo.intro"
        @click.native="$router.push('/home/editInfo?type=intro')"
      ></mycell>
    </div>
    <van-button class="fff" block @click="exit">
      <span class="red">退出按钮</span>
    </van-button>

    <!-- 性别 选择弹窗 -->
    <van-popup v-model="isShowGender" position="bottom">
      <!-- 弹出层 -->
      <!-- van-popup 
        v-model:控制是否显示
        position:弹出层位置 center top bottom left right -->

      <!-- 选择框
        van-picker
        title:标题
        show-toolbar:取消与确定按钮栏
        columns:数据,数组数据类型
        default-index:默认选中哪一项(索引值)
        @confirm function(value值,index索引):确定按钮点击事件 选中项的value 选中项的索引
        @cancel:常用于关闭弹窗 取消按钮点击事件
        [保密  男  女]  女
        选择性别 后再次打开,默认选中项是前面选择的  

        genderObj:{['保密','男','女']
            0:'保密',
            1:'男',
            2:'女',        
        }      
        Object.values(对象名)
        Object.keys(对象名)
         -->

      <van-picker
        title="修改性别"
        show-toolbar
        :columns="Object.values(genderObj)"
        :default-index="userInfo.gender"
        @confirm="genderConfirm"
        @cancel="isShowGender = false"
      >
      </van-picker>
    </van-popup>
    <!-- 城市选择 -->
    <!-- <van-popup
    v-model="isShowCity"
    position:位置>
    </van-popup> -->
    <!-- van-area城市选择
      value:默认选中哪一项的对应的值
      title:标题
      area-list:城市的数据
      cloumns-num:1:只有省 2:省市  3:省市区
      @cancel 取消按钮点击事件
      @confirm 确定按钮点击事件
         function(value,index){
           value:[{code:城市编码,name:城市名},{code:城市编码,name:城市名}]
           index:[0,0]
         }
    
    
     -->

    <van-popup v-model="isShowCity" position="bottom">
      <van-area
        title="城市选择"
        :area-list="area"
        columns-num="2"
        :value="userInfo.area"
        @cancel="isShowCity = false"
        @confirm="cityConfirm"
      >
      </van-area>
    </van-popup>
  </div>
</template>

<script>
/* mapState 1.导入 import {mapState} from 'vuex' 2.computed:{...mapState(['userInfo])} */
import { mapState } from 'vuex'
/* 导入mycell  主册 当标签使用*/
import mycell from './mycell.vue'
import area from '@/assets/js/area.js'
/* 导入删除token */
import { removeLocal } from '@/utils/local.js'
import { auEdit } from '@/api/my.js'

export default {
  data () {
    return {
      area: area, //城市选择数据
      isShowGender: false,
      isShowCity: false, //显示城市弹窗
      genderObj: {
        0: '保密',
        1: '男',
        2: '女'
      }
    }
  },
  components: {
    mycell
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    /* 点击退出按钮 */
    exit () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '您确定退出吗?'
        })
        .then(() => {
          /* 清除token */
          removeLocal()
          /* 修改vuex登录状态*/
          this.$store.commit('setLoginStatus', false)
          /* 跳转登录页 */
          this.$router.push('/login')
        })
        .catch(() => {})
    },
    //性别确定
    async genderConfirm (value, index) {
      this.editInfo('gender', index)
      //发送请求编辑性别
      // await auEdit({ gender: index })
      /* 编辑成功后,关闭弹窗 */
      // this.isShowGender = false
      /* 提示一下 */
      // this.$toast.success('修改成功')
      /* 刷新数据 */
      /* 下面内容封装到store里面actions */
      // const res = await)
      // /* 更新userInfo */
      // this.$store.commit('setUserInfo', res.data.data)
      // window.console.log(res)
      /* 刷新数据 */
      /* vuex处理刷新用户信息:1.相当于对刷新用户信息方法做了一个封装 */
      /* 5.触发actions方法 */
      // this.$store.dispatch('refreshUserInfo')
    },
    //城市确定
    cityConfirm (value, index) {
      window.console.log(value, index)
      /* 编辑城市 */
      //await auEdit({area:value[1].code})
      //  this.isShowCity = false
      // this.$toast.success('修改成功')
      // this.$store.dispatch('refreshUserInfo')
      this.editInfo('area', value[1].code)
    },
    /* 调用接口修改城市 封装公有方法编辑用户信息 */
    async editInfo (key, value) {
      /* 对象的key如果希望是变量 {[变量]:值} */
      await auEdit({ [key]: value })
      this.isShowGender = false
      this.isShowCity = false
      this.$toast.success('修改成功')
      this.$store.dispatch('refreshUserInfo')
    }
  }
}
</script>

<style lang="less" scoped>
.myInfo {
  height: 100%;
  background-color: #f7f4f5;
  .content {
    padding: 20px @p15;
    background: #f7f4f5;
    .round {
      border-radius: 8px;
    }
  }
  .other-info {
    padding: 0px @p15;
    border-radius: 8px;
  }
  .fff {
    margin-left: 15px;
    width: 345px;
    height: 50px;
    background: #ffffff;
    border-radius: 8px;
    padding: 20px @p15;
    margin-top: 12px;
    .red {
      color: red;
    }
  }
}
</style>
